<script>
import VueJsonEditor from 'vue-json-editor'

export default {
  name: "editor",
  components: {
    VueJsonEditor
  },
  data() {
    return {
      showErrorTips: false,
      jsonEditorData: []
    }
  },
  methods: {
    jsonEditorDataChange(json) {
      this.jsonEditorData = json
      this.showErrorTips = false
    },
    jsonEditorDataHasError(error) {
      // 当清空输入的数据时
      if (error.message && error.message.includes("Expecting 'STRING', 'NUMBER', 'NULL', 'TRUE', 'FALSE', '{', '[', got 'EOF'")) {
        this.jsonEditorData = {}
        this.showErrorTips = false
      } else {
        this.showErrorTips = true
      }
    }
  }
}
</script>

<template>
  <div>
    <div class="code-json-editor">
      <vue-json-editor
        v-model="jsonEditorData"
        :showBtns="true"
        :mode="'code'"
        lang="zh"
        :expandedOnStart="true"
        @json-change="jsonEditorDataChange"
        @has-error="jsonEditorDataHasError"/>
    </div>
    <div v-if="showErrorTips">格式错误，请输入json格式</div>

  </div>
</template>

<style scoped>
.code-json-editor >>> .jsoneditor-poweredBy {
  display: none !important;
}
</style>
